<div
    *ngIf="(items$ | async) as items"
    class="controls d-flex align-items-center flex-shrink-0 mb-2"
>
    <div class="d-flex flex-grow-1">
        <button
            (click)="makeAllRead()"
            *ngrxLet="unreadCount$ as count"
            [disabled]="(makeAllReadButtonLocked$ | async) || false"
            class="btn btn-sm btn-primary mr-2 text-nowrap"
        >
            Make read
            <ng-container [ngSwitch]="makeAllReadInProgress$ | async">
                <i *ngSwitchCase="true" class="fa fa-spinner fa-pulse fa-fw"></i>
                <span *ngSwitchDefault [innerText]="'(' + count + ')'" [ngClass]="{'d-none': !count}"></span>
            </ng-container>
        </button>
        <ng-content select="[controls]"></ng-content>
        <div class="btn btn-sm border border-secondary-light" style="cursor: default;">
            {{ (title$ | async) + (items.length ? ':' : '') }}
            <span *ngIf="items.length">{{ (paging$ | async)?.end }} of {{ items.length }}</span>
        </div>
    </div>
    <div class="d-flex">
        <div
            *ngrxLet="plainItemsCount$ as count"
            [isDisabled]="(deletingMessagesButtonLocked$ | async) || false"
            class="btn-group mx-2"
            dropdown
            placement="bottom right"
            title="Delete permanently"
        >
            <button
                class="btn btn-sm btn-outline-danger dropdown-toggle"
                dropdownToggle
                type="button"
            >
                <i class="fa fa-times"></i>
                <ng-container [ngSwitch]="deletingMessagesInProgress$ | async">
                    <i *ngSwitchCase="true" class="fa fa-spinner fa-pulse fa-fw ml-1"></i>
                    <span *ngSwitchDefault [innerText]="'(' + count + ')'" [ngClass]="{'d-none': !count}" class="ml-1"></span>
                    <span class="caret"></span>
                </ng-container>
            </button>
            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right px-0 py-1" role="menu">
                <li>
                    <a
                        (click)="deleteMessages()"
                        class="dropdown-item px-2"
                        href="#"
                        role="menuitem"
                    >
                        <i class="fa fa-times text-danger"></i>
                        Confirm <span class="text-danger">permanent</span> deleting
                    </a>
                </li>
            </ul>
        </div>
        <div
            #moveAllToDropdown="bs-dropdown"
            *ngrxLet="plainItemsCount$ as count"
            [isDisabled]="(setFolderButtonLocked$ | async) || false"
            class="btn-group mr-2"
            dropdown
            title="Move to folder"
        >
            <button
                class="btn btn-sm btn-secondary-light dropdown-toggle"
                dropdownToggle
                type="button"
            >
                <i class="fa fa-folder-open-o"></i>
                <ng-container [ngSwitch]="setFolderInProgress$ | async">
                    <i *ngSwitchCase="true" class="fa fa-spinner fa-pulse fa-fw ml-1"></i>
                    <span *ngSwitchDefault [innerText]="'(' + count + ')'" [ngClass]="{'d-none': !count}" class="ml-1"></span>
                    <span class="caret"></span>
                </ng-container>
                <ul *dropdownMenu class="dropdown-menu px-0 py-1" role="menu">
                    <li
                        (click)="moveAllToDropdown.hide(); setFolder(folder.id)"
                        *ngFor="let folder of (moveToFolders$ | async)"
                        role="menuitem"
                    >
                        <a class="dropdown-item px-2" href="#">
                            <electron-mail-db-view-folder [folder]="folder"></electron-mail-db-view-folder>
                        </a>
                    </li>
                </ul>
            </button>
        </div>
        <electron-mail-db-view-mails-export
            [dbAccountPk]="dbAccountPk"
            [mailsBundleItems]="items"
            [titleSuffix]="items.length ? '(' + items.length + ')' : ''"
            [title]="'Export'"
        ></electron-mail-db-view-mails-export>
        <div
            *ngIf="(sorting$ | async) as sorting;"
            class="btn-group ml-2"
            dropdown
            placement="bottom right"
            title="Sort by"
        >
            <button
                class="btn btn-sm btn-secondary-light dropdown-toggle"
                dropdownToggle
                type="button"
            >
                <span class="pl-1">{{ sorting.sorters[sorting.sorterIndex]?.title }}</span>
                <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right px-0 py-1" role="menu">
                <li *ngFor="let sorter of sorting.sorters; index as sorterIndex;">
                    <a
                        (click)="sortChange(sorterIndex)"
                        class="dropdown-item px-2"
                        href="#"
                        role="menuitem"
                    >
                        {{ sorter.title }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div
    *ngIf="items$ | async; let items;"
    class="overflow-auto"
>
    <!-- TODO consider using "virtual list", ie render only visible data -->
    <electron-mail-db-view-mail
        *ngFor="let item of items.slice(0, (paging$ | async)?.end); trackBy: trackByMailBundleItem"
        [attr.data-pk]="item.mail.pk"
        [conversationSize]="item.conversationSize"
        [mail]="item.mail"
    ></electron-mail-db-view-mail>
    <button
        (click)="loadMore()"
        *ngIf="(paging$ | async)?.nextPageSize; let nextPageSize;"
        class="btn btn-sm btn-secondary-light load-more my-2"
    >
        More
        <small>(+{{ nextPageSize }})</small>
    </button>
</div>
